<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My school</title>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/myschool.css">
  </head>

  <body>
    <i class="xy">@校园风景</i>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="../images/nature-1.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/nature-2.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/nature-3.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/nature-4.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/nature-5.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/nature-6.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/nature-7.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/nature-8.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="../images/nature-9.jpg" alt="">
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <!-- Swiper JS -->
    <script src="../js/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>
